// 轮播图
class LeftRight {
    constructor() {
        this.ele_left = document.querySelector(".left");
        this.ele_right = document.querySelector(".right");
        this.ele_wrap = document.querySelector(".wrap");
        this.ele_swiper = document.querySelector(".swiper");
        this.arr_swipers = [];
        this.arr_imgSrc = ["./images/38c96c90a11a.jpg", "./images/42032423bead.jfif", "./images/5437c8a56a68.jpg", "./images/9bcbcc5102d3.jfif", "./images/b790a85b9714.jfif", "./images/d520b885921d.jfif", "./images/dd0720c0d95b.jfif", "./images/e4f0df0b2bbb.jfif", "./images/ee1b3132bef7.jfif"]
        this.index = 0;
        this.width = 0;
        this.initialize();
        this.addEvent();
    }
    initialize() {
        for (let i = 0; i < this.arr_imgSrc.length; i++) {
            this.ele_wrap.innerHTML += `<span><a href="#"><img src="${this.arr_imgSrc[i]}" alt=""></a></span>`;
        }
        // 根据图片数量生成导标
        const amount = document.querySelectorAll(".wrap>span").length;
        for (let i = 0; i < amount; i++) {
            const ele_span = document.createElement("span");
            this.ele_swiper.appendChild(ele_span);
            this.arr_swipers.push(ele_span);
        };
        this.width = document.querySelector(".banner img").offsetWidth;
        // 高亮第一个导标
        this.arr_swipers[0].className = "on";
        // 复制包含第一张图片的元素,添加到最后.实现无缝切换
        const ele_firstSpanClone = document.querySelector(".wrap>span:first-child").cloneNode(true);
        this.ele_wrap.appendChild(ele_firstSpanClone);
    }
    addEvent() {
        this.ele_right.addEventListener("click", () => {
            this.index++;
            this.ele_wrap.style.left = -(this.index * this.width) + "px";
            if (this.index === 9) {
                setTimeout(() => {
                    this.index = 0;
                    this.ele_wrap.style.left = -(this.index * this.width) + "px";
                    this.ele_wrap.style.transition = "none";
                }, 200);
            }
            this.ele_wrap.style.transition = "0.2s ease";
            this.render();
        })
        this.ele_left.addEventListener("click", () => {
            this.index--;
            if (this.index === -1) {
                this.ele_wrap.style.transition = "none";
                this.ele_wrap.style.left = -(9 * this.width) + "px";
                setTimeout(() => {
                    this.index = 8;
                    this.ele_wrap.style.transition = "0.2s ease";
                    this.ele_wrap.style.left = -(this.index * this.width) + "px";
                }, 0);
            } else {
                this.ele_wrap.style.left = -(this.index * this.width) + "px";
            }
            this.render();
        })
    }
    render() {
        const that = this;
        this.arr_swipers.forEach((val, idx) => {
            val.className = "";
            if (idx === that.index) {
                val.className = "on";
            }
        })
    }
}
new LeftRight;
